<template>
  <div class="myInfo">
    <div class="inf1">
      <h2 class="inf2">个人信息</h2>
    </div>
    <div class="inf3">
      <el-image :src="vals" class="image" width="100%" height="100%"></el-image>
    </div>
    <div class="inf4">
      <span class="inf5">账号： {{ user.uid }} </span>
    </div>
    <div class="inf6">
      <span class="inf7">姓名： {{ user.username }} </span>
    </div>
    <div class="inf6">
      <span class="inf7">电话： {{ user.phone }} </span>
    </div>
    <div class="inf6">
      <span :style="s1">VIP会员: {{ vip }} </span>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
const vals = ref('')
const user = reactive({ uid: '', username: '', phone: '', vid: '' })
const vip = ref('暂无会员')
const s1 = ref('font-size: large;color: white')
onMounted(() => {
  user.vid = JSON.parse(sessionStorage.getItem('vid'))
  user.uid = JSON.parse(sessionStorage.getItem('uid'))
  user.username = JSON.parse(sessionStorage.getItem('username'))
  user.phone = JSON.parse(sessionStorage.getItem('phone'))
  vals.value = require('@/assets/UserPic/' + JSON.parse(sessionStorage.getItem('headSrc')))
  if (user.vid !== 0) {
    axios.get('api/vip/isVip/' + user.vid).then((res) => {
      if (res.data === 'YES') {
        vip.value = '超级会员'
        s1.value = 'font-size: large;color: red'
      } else {
        vip.value = '已过期'
      }
    })
  }
})
</script>
<style lang="scss" scoped>
.myInfo {
  width: 20%;
  height: 420px;
  float: left;
  margin-left: 20px;
  margin-top: 50px;
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}
.inf1 {
  width: 100%;
  height: 50px;
}
.inf2 {
  color: orange;
}
.inf3 {
  width: 120px;
  height: 120px;
  margin-left: 60px;
}
.inf4 {
  width: 100%;
  height: 50px;
  margin-top: 30px;
}
.inf5 {
  font-size: large;
  color: white;
}
.inf6 {
  width: 100%;
  height: 50px;
}
.inf7 {
  font-size: large;
  color: white;
}
</style>
